<!doctype html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0" />
	
	<meta name="format-detection" content="telphone=no,email=no"/>
	<link rel="stylesheet" href="css/global.css">
	<title>layout</title>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>
    <style type="text/css">
    pre{
        background-color: #fff;
    }
    .decimal-list{
        list-style: decimal;
        padding-left: 20px;
    }
    </style>
</head>
<body>
<header class="header">
    <div class="header-left"><i class="header-icon icon-v-left js-back"></i></div>
    <h1 class="page-tt">layout</h1>
</header>
<main id="pages" class="page-wrap">
    <div class="page">
        <div class="content">
            <h2 class="guide-title">常规布局</h2>
            <pre>&lt;!-- 遮罩层 --&gt;   
&lt;div class="overlay"&gt;&lt;/div&gt; 

&lt;!-- 头部 --&gt;  
&lt;header class="header"&gt;&lt;/header&gt;

&lt;!-- 中间内容容器层 --&gt;  
&lt;main id="pages" class="page-wrap"&gt;    
    &lt;!-- 页面1 --&gt;
    &lt;div class="page"&gt;    
        &lt;!-- 中间内容滚动层 --&gt; 
        &lt;div class="content"&gt;    
            ...
        &lt;/div&gt;

        &lt;!-- 底部 --&gt;    
        &lt;footer class="footer"&gt;&lt;/footer&gt;
    &lt;/div&gt;

    &lt;!-- 页面2 --&gt;
    &lt;div class="page"&gt;&lt;/div&gt;   
    ...
&lt;/main&gt;

&lt;!-- 交互层如pop,tips,modal,panel等 --&gt; 
&lt;section&gt;   
&lt;/section&gt;
...
</pre>
            <h2 class="guide-title">使用说明：</h2>
            <div class="p10">
                <ol class="decimal-list">
                    <li>'.overlay'作为交互的蒙版层</li>
                    <li>header和footer采用fixed定位，header独立出来（适合hybrid干掉头部），footer放在单个页面里面</li>
                    <li>#pages作为所有页面的容器，一个.page代表一个页面，每个.page都可以独立布局
    页面切换发生在article.page上，class分别为'.page--left','.page--right'，切换动画分别为：'.page--in','.page--out'</li>
                    <li>默认article.page的padding-top为header的高度，且额外提供了一个扩展的class'.has-header'来取消padding-top，当然也可以给上面的page一个特殊的class，来设置里面的布局</li>
                    <li>除此之外，提供了两个class来设置页面的padding，分别为'.p10','.plr10'，可以挂靠在`.content`中的标签上</li>
                    <li>拥有底部footer的，需要在`.content`中再添加一层结构来空出footer占的位置，可参看nav的demo</li>
                    <li>如果除header外，上面还有需要fixed定位的元素，请在`.content`前面添加`.header-sub`，可参考search的demo，或自定义，可参考calendar的demo</li>
                    <li>所有的交互层插在body结束之前</li>
                </ol>
                <p>注：当父元素设置了transform值的时候，子元素的fixed的定位方式不再是根元素，而是transform的父元素</p>                
            </div>
        </div>
    </div>
</main>
</body>
</html>